<template>
  <div class="image-frame"
       :style="{
         width: imageFrameWidth + 'vw',
         height: imageFrameHeight + 'vw',
       }"
       @mousemove="mousemove"
       @mouseout="mouseout"
  >
    <div class="image-content">
      <div style="display: flex">
        <sshbImage v-if="src.length > 0"
                   :src="src[0][keyVal]"
                   :width="widthGroup.oneWidth"
                   :height="widthGroup.oneHeight"
                   @click="emitClick(0)"></sshbImage>
        <sshbImage v-if="src.length > 1"
                   :src="src[1][keyVal]"
                   :width="widthGroup.oneWidth"
                   :height="widthGroup.oneHeight"
                   @click="emitClick(1)"></sshbImage>
      </div>
      <div style="display: flex">
        <sshbImage v-if="src.length > 2"
                   :src="src[2][keyVal]"
                   :width="widthGroup.twoWidth"
                   :height="widthGroup.twoHeight"
                   @click="emitClick(2)"></sshbImage>
        <sshbImage v-if="src.length > 3"
                   :src="src[3][keyVal]"
                   :width="widthGroup.twoWidth"
                   :height="widthGroup.twoHeight"
                   @click="emitClick(3)"></sshbImage>
      </div>
    </div>
  </div>
</template>

<script setup>
  import sshbImage from './index.vue'
  import { defineProps, ref, defineEmits } from 'vue'

  const emit = defineEmits(['click']);

  const props = defineProps({
    src: {
      default: [],
      type: Array,
      required: true,
    },
    width: {
      default: 200,
      type: Number
    },
    height: {
      default: 200,
      type: Number
    },
    keyVal: {
      default: 'src',
      type: String
    }
  })

  const imageFrameWidth = ref(0)  // 图片宽度
  const imageFrameHeight = ref(0) // 图片高度
  imageFrameWidth.value = props.width / 1920 * 100 // 计算百分比
  imageFrameHeight.value = props.height / 1920 * 100 // 计算百分比
  // 图片分组
  const widthGroup = ref({
    oneWidth: props.width,
    twoWidth: props.width / 2,
    oneHeight: props.height,
    twoHeight: props.height / 2,
  })

  // 鼠标移入
  const mousemove = () => {
    widthGroup.value.oneWidth = props.width / 2
    widthGroup.value.oneHeight = props.height / 2
  }
  // 鼠标移出
  const mouseout = (event) => {
    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
      widthGroup.value.oneWidth = props.width
      widthGroup.value.oneHeight = props.height
    }
  }

  // 点击事件
  const emitClick = (index) => {
    emit('click', props.src[index]);
  }
</script>

<style lang="less" scoped>
  .image-frame {
    position: relative;
    overflow: hidden;
    .image-content {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>
